{include file="common/header"}
<div id="app" v-cloak>
    <div class="el-curd">
        <el-form 
            ref="search" 
            class="el-curd-header" 
            size="small"
            :inline="true" 
            :model="search" 
            @submit.native.prevent>
            <el-form-item class="el-button-form">
                <el-button type="info" icon="el-icon-refresh" @click="openData()">添加数据表</el-button>
                <el-button 
                    type="danger" 
                    icon="el-icon-delete" 
                    :disabled="rows.length === 0" 
                    @click="removeData()">
                    删除数据表
                </el-button>
                <a href="{:config('app.api')}/1090/108.html" target="_blank">
                    <el-button icon="el-icon-question" size="small">文档帮助</el-button>
                </a>
            </el-form-item>
            <el-form-item class="el-search-form">
                <el-input 
                    style="width:300px" 
                    placeholder="请输入表名搜索" 
                    v-model="search.keyword" 
                    @keyup.enter.native="keywordChange()">
                    <el-button slot="append" icon="el-icon-search" @click="getData()"></el-button>
                </el-input>
            </el-form-item>
        </el-form>
        <div class="el-curd-table">
            <el-table
                ref="table"
                :data="table" 
                :default-sort="{prop: search.prop, order: search.order}"
                v-loading="loading"
                @selection-change="selectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="cover" label="菜单图标">
                    <div slot-scope="scope">
                        <el-image :src="scope.row.cover" :preview-src-list="[scope.row.cover]" style="width: 40px"></el-image>
                    </div>
                </el-table-column>
                <el-table-column prop="title" label="菜单标题"></el-table-column>
                <el-table-column prop="name" label="数据表名"></el-table-column>
                <el-table-column label="操作">
                    <div slot-scope="scope">
                        <a href="javascript:;" @click="openData(scope.row)">设计</a>
                        <a href="javascript:;" @click="removeData(scope.row)">删除</a>
                    </div>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            layout="total, prev, pager, next, jumper"
            :current-page="search.page"
            :page-size="search.pageSize"
            :total="total"
            background
            @current-change="pageChange">
        </el-pagination>
    </div>
    <el-drawer :visible.sync="drawer" :with-header="false" size="100%">
        <el-page-header @back="drawer=false" content="设计数据表">
            <template v-slot:title>Esc键返回</template>
        </el-page-header>
        <div class="el-layout">
            <div class="el-pane-warp" style="padding: 20px 0px 0 20px;">
                <div class="el-curd-field">
                    <div class="tabs">
                        <draggable class="add-draggable" v-model="field" v-bind="addDraggable" :clone="dropField">
                            <div v-for="(item, index) in field" class="el-curd-field-move-item">
                                <i class="iconfont" :class="item.icon"></i>
                                <div class="title">{{item.title}}</div>
                            </div>
                        </draggable>
                    </div>
                    <div class="preview">
                        <div class="info" @click="drawerTable = true">高级选项<i class="el-icon-caret-bottom"></i></div>
                        <el-drawer
                            :with-header="false"
                            direction="ttb"
                            :size="240"
                            :visible.sync="drawerTable"
                            :append-to-body="true">
                            <el-form 
                                ref="drawerData"
                                style="height: 100%;padding:20px;overflow: auto;"
                                label-width="80px"
                                size="small"
                                :model="drawerData"
                                :rules="drawerRules">
                                    <el-row :gutter="10">
                                        <el-col :xs="24" :sm="8" :md="8">
                                            <el-form-item label="权限图标" prop="cover">
                                                <el-file-select v-model="drawerData.cover"></el-file-select>
                                            </el-form-item>
                                            <el-form-item label="权限标题" prop="title">
                                                <el-input v-model="drawerData.title" style="width:200px" placeholder="例如：测试"></el-input>
                                            </el-form-item>
                                            <el-form-item label="数据表名" prop="name">
                                                <el-input v-model="drawerData.name" style="width:200px" placeholder="例如：mk_ceshi"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="8" :md="8">
                                            <el-form-item label="表格排序" prop="table_sort">
                                                <el-select v-model="drawerData.table_sort">
                                                    <el-option value="" label="默认"></el-option>
                                                    <el-option
                                                        v-for="(item, index) in drawerData.field"
                                                        :value="item.prop"
                                                        :label="item.label">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="表格树形" prop="table_tree">
                                                <el-switch v-model="drawerData.table_tree" :active-value="1" :inactive-value="0"></el-switch>
                                            </el-form-item>
                                            <el-form-item label="数据导出" prop="table_export">
                                                <el-switch v-model="drawerData.table_export" :active-value="1" :inactive-value="0"></el-switch>
                                            </el-form-item>
                                            <el-form-item label="模糊查询" prop="search_keyword">
                                               <el-switch v-model="drawerData.search_keyword" :active-value="1" :inactive-value="0"></el-switch>
                                            </el-form-item>
                                            <el-form-item label="日期查询" prop="search_date">
                                               <el-switch v-model="drawerData.search_date" :active-value="1" :inactive-value="0"></el-switch>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="8" :md="8">
                                            <el-form-item label="表单标题" prop="form_label_width">
                                                <el-input-number v-model="drawerData.form_label_width" controls-position="right" :min="100" :max="200"></el-input-number>
                                            </el-form-item>
                                            <el-form-item label="表单栅格" prop="form_col_md">
                                                <el-select v-model="drawerData.form_col_md">
                                                    <el-option :value="24" label="一行一个表单"></el-option>
                                                    <el-option :value="12" label="一行两个表单"></el-option>
                                                    <el-option :value="8" label="一行三个表单"></el-option>
                                                    <el-option :value="6" label="一行四个表单"></el-option>
                                                    <el-option :value="4" label="一行六个表单"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                            </el-form>
                        </el-drawer>
                        <el-form class="el-preview-form" :label-width="drawerData.form_label_width + 'px'">
                            <el-row>
                                <draggable class="draggable" :class="{dragin: drawerData.field.length === 0}" v-model="drawerData.field" v-bind="draggable">
                                    <template v-for="(item, index) in drawerData.field">
                                        <el-col
                                            class="block"
                                            :key="index" 
                                            :md="item.colMd === '' ? drawerData.form_col_md : item.colMd"
                                            :class="{active: item.prop == fieldForm.prop}">
                                            <div class="curd-icon">
                                                <i class="el-icon-edit" @click="openField(item)" title="编辑"></i>
                                                <i class="rank el-icon-rank" title="移动"></i>
                                                <i v-if="item.key != 'PRI'" class="el-icon-delete" @click="moveField(item, index)" title="删除"></i>
                                            </div>
                                            <el-form-item 
                                                :prop="item.prop" 
                                                :label="item.label"
                                                :rules="item.required ? [{ required: true, message: '不能为空'}] : []">
                                                <div v-if="item.child.length == 0 && (item.is === 'el-radio-group' || item.is === 'el-checkbox-group')">
                                                    请配置表单选项
                                                </div>
                                                <component 
                                                    v-else
                                                    v-model="item.default"
                                                    :is="item.is"
                                                    :key="item.id"
                                                    :type="item.type"
                                                    :options="item.options"
                                                    :disabled="item.disabled || item.key == 'PRI'"
                                                    :placeholder="item.placeholder"
                                                    :filterable="item.filterable"
                                                    :multiple="item.multiple"
                                                    :active-value="1"
                                                    :inactive-value="0"
                                                    :style="{opacity: item.formShow ? 1 : 0.5}"
                                                    format="yyyy-MM-dd HH:mm:ss"
                                                    value-format="yyyy-MM-dd HH:mm:ss"
                                                    start-placeholder="开始日期"
                                                    range-separator="至"
                                                    end-placeholder="结束日期"
                                                    controls-position="right">
                                                    <template v-if="item.is == 'el-radio-group' || item.is == 'el-checkbox-group' || item.is == 'el-select'">
                                                        <template v-if="item.is == 'el-radio-group' || item.is == 'el-checkbox-group'">
                                                            <component 
                                                                v-for="(val, key) in item.child"
                                                                :is="item.is == 'el-radio-group' ? 'el-radio' : 'el-checkbox'"
                                                                :key="val.value"
                                                                :label="val.value">
                                                                {{ val.title }}
                                                            </component>
                                                        </template>
                                                        <template v-else>
                                                            <el-option 
                                                                v-for="(val, key) in item.child"
                                                                :key="val.value"
                                                                :value="val.value"
                                                                :label="val.title">
                                                                {{ val.title }}
                                                            </el-option>
                                                        </template>
                                                    </template>
                                                </component>
                                                <div class="el-tips" v-if="item.tips !== ''" v-html="item.tips"></div>
                                            </el-form-item> 
                                        </el-col>
                                    </template>
                                </draggable>
                            </el-row>
                        </el-form>
                    </div>
                    <div class="set">
                        <el-form label-width="82px">
                            <el-empty v-if="fieldForm == ''" description="未选择字段"></el-empty>
                            <template v-else>
                                <template>
                                    <el-form-item prop="prop">
                                        <template v-slot:label>
                                            <el-tooltip content="数据表字段列名" placement="top">
                                                <i>数据字段：</i>
                                            </el-tooltip>
                                        </template>
                                        <el-input v-model="fieldForm.prop" @focus="oldProp = fieldForm.prop" @change="updateField()"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="label">
                                        <template v-slot:label>
                                            <el-tooltip content="表格标题" placement="top">
                                                <i>表单标题：</i>
                                            </el-tooltip>
                                        </template>
                                        <el-input v-model="fieldForm.label"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="formShow">
                                        <template v-slot:label>
                                            <el-tooltip content="不显示则表单中不会出现此字段，演示只是做隐藏处理" placement="top">
                                                <i>表单显示：</i>
                                            </el-tooltip>
                                        </template>
                                        <el-switch v-model="fieldForm.formShow"></el-switch>
                                    </el-form-item>
                                    <el-form-item label="表单组件：" prop="is">
                                        <el-select v-if="fieldForm.key != 'PRI'" v-model="fieldForm.is" @change="isChange()" filterable>
                                            <el-option label="输入框" value="el-input"></el-option>
                                            <el-option label="编辑器" value="el-editor"></el-option>
                                            <el-option label="单选框" value="el-radio-group"></el-option>
                                            <el-option label="多选框" value="el-checkbox-group"></el-option>
                                            <el-option label="选择框" value="el-select"></el-option>
                                            <el-option label="文件上传" value="el-file-upload"></el-option>
                                            <el-option label="文件选择" value="el-file-select"></el-option>
                                            <el-option label="多文件选择" value="el-file-list-select"></el-option>
                                            <el-option label="开关" value="el-switch"></el-option>
                                            <el-option label="日期时间选择器" value="el-date-picker"></el-option>
                                            <el-option label="时间选择器" value="el-time-select"></el-option>
                                            <el-option label="计数器" value="el-input-number"></el-option>
                                            <el-option label="级联选择器（多级联动）" value="el-cascader"></el-option>
                                            <el-option label="滑块" value="el-slider"></el-option>
                                            <el-option label="评分" value="el-rate"></el-option>
                                            <el-option label="颜色选择器" value="el-color-picker"></el-option>
                                            <el-option label="链接选择" value="el-link-select"></el-option>
                                            <el-option label="自定义参数" value="el-parameter"></el-option>
                                        </el-select>
                                        <span v-else>主键不显示（自增）</span>
                                    </el-form-item>
                                    <el-form-item v-if="fieldForm.key != 'PRI'" label="字段类型：" prop="field">
                                        <el-select v-model="fieldForm.field" @change="updateFieldType()" filterable>
                                            <el-option label="bigint" value="bigint"></el-option>
                                            <el-option label="binary" value="binary"></el-option>
                                            <el-option label="bool" value="bool"></el-option>
                                            <el-option label="boolean" value="boolean"></el-option>
                                            <el-option label="char" value="char"></el-option>
                                            <el-option label="date" value="date"></el-option>
                                            <el-option label="datetime" value="datetime"></el-option>
                                            <el-option label="double" value="double"></el-option>
                                            <el-option label="enum" value="enum"></el-option>
                                            <el-option label="float" value="float"></el-option>
                                            <el-option label="int" value="int"></el-option>
                                            <el-option label="json" value="json"></el-option>
                                            <el-option label="longtext" value="longtext"></el-option>
                                            <el-option label="text" value="text"></el-option>
                                            <el-option label="time" value="time"></el-option>
                                            <el-option label="tinyint" value="tinyint"></el-option>
                                            <el-option label="tinytext" value="tinytext"></el-option>
                                            <el-option label="tinyblob" value="tinyblob"></el-option>
                                            <el-option label="varchar" value="varchar"></el-option>
                                            <el-option label="year" value="year"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item 
                                        label-width="0"
                                        prop="child" 
                                        v-if="fieldForm.is == 'el-radio-group' || fieldForm.is == 'el-checkbox-group' || fieldForm.is == 'el-select'">
                                        <el-parameter v-model="fieldForm.child" :rank="false" :push="false"></el-parameter>
                                    </el-form-item>
                                    <el-form-item 
                                        label="表单类型：" 
                                        prop="type" 
                                        v-if="fieldForm.is == 'el-file-upload' || fieldForm.is == 'el-file-select' || fieldForm.is == 'el-file-list-select' || fieldForm.is == 'el-date-picker'">
                                        <el-input
                                            v-model="fieldForm.type" 
                                            v-if="fieldForm.is == 'el-file-upload'">
                                        </el-input>
                                        <el-radio-group 
                                            v-model="fieldForm.type" 
                                            v-if="fieldForm.is == 'el-file-select' || fieldForm.is == 'el-file-list-select'">
                                            <el-radio label="all">全部</el-radio>
                                            <el-radio label="image">图片</el-radio>
                                            <el-radio label="video">视频</el-radio>
                                            <el-radio label="audio">音频</el-radio>
                                            <el-radio label="word">文档</el-radio>
                                            <el-radio label="other">其它</el-radio>
                                        </el-radio-group>
                                        <el-radio-group 
                                            v-model="fieldForm.type" 
                                            v-if="fieldForm.is == 'el-date-picker'">
                                            <el-radio label="date">日期</el-radio>
                                            <el-radio label="datetime">日期时间</el-radio>
                                            <!--<el-radio label="daterange">日期范围</el-radio>-->
                                            <!--<el-radio label="datetimerange">日期时间范围</el-radio>-->
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item v-if="fieldForm.is != 'el-link-select' && fieldForm.is != 'el-parameter' && fieldForm.key != 'PRI'" prop="default">
                                        <template v-slot:label>
                                            <el-tooltip content="新增数据时，此字段的默认值" placement="top">
                                                <i>表单默认：</i>
                                            </el-tooltip>
                                        </template>
                                        <template v-if="fieldForm.is == 'el-switch'">
                                            <el-radio-group v-model="fieldForm.default">
                                                <el-radio :label="1">开启</el-radio>
                                                <el-radio :label="0">关闭</el-radio>
                                            </el-radio-group>
                                        </template>
                                        <template v-else>
                                            <template v-if="typeof fieldForm.default == 'object'">
                                                <el-input 
                                                    style="margin-bottom: 10px" 
                                                    v-for="(val,key) in fieldForm.default" 
                                                    v-model="fieldForm.default[key]" 
                                                    placeholder="请输入内容">
                                                    <el-button 
                                                        slot="append" 
                                                        icon="el-icon-delete-solid" 
                                                        size="small"
                                                        @click="fieldForm.default.splice(key, 1)">
                                                    </el-button>
                                                </el-input>
                                                <el-button 
                                                    icon="el-icon-plus" 
                                                    size="small"
                                                    @click="fieldForm.default.push('')"
                                                    circle>
                                                </el-button>
                                            </template>
                                            <el-input v-else v-model="fieldForm.default"></el-input>
                                        </template>
                                    </el-form-item>
                                    <el-form-item prop="multiple" v-if="fieldForm.is == 'el-select'">
                                        <template v-slot:label>
                                            <el-tooltip content="当组件为选择框时，可指定是否能选多个项目" placement="top">
                                                <i>表单多选：</i>
                                            </el-tooltip>
                                        </template>
                                        <el-switch v-model="fieldForm.multiple" @change="fieldForm.default = ''"></el-switch>
                                    </el-form-item>
                                    <el-form-item prop="filterable" v-if="fieldForm.is == 'el-select'">
                                        <template v-slot:label>
                                            <el-tooltip content="当组件为选择框时，可指定是否能搜索项目" placement="top">
                                                <i>表单搜索：</i>
                                            </el-tooltip>
                                        </template>
                                        <el-switch v-model="fieldForm.filterable"></el-switch>
                                    </el-form-item>
                                    <template v-if="fieldForm.key != 'PRI'">
                                        <el-form-item prop="placeholder" v-if="fieldForm.is == 'el-input' || fieldForm.is == 'el-editor' || fieldForm.is == 'el-select'">
                                            <template v-slot:label>
                                                <el-tooltip content="表单占用提示信息" placement="top">
                                                    <i>表单提示：</i>
                                                </el-tooltip>
                                            </template>
                                            <el-input v-model="fieldForm.placeholder"></el-input>
                                        </el-form-item>
                                        <el-form-item prop="tips">
                                            <template v-slot:label>
                                                <el-tooltip content="表单下方指示信息，引导作用" placement="top">
                                                    <i>表单注释：</i>
                                                </el-tooltip>
                                            </template>
                                            <el-input v-model="fieldForm.tips"></el-input>
                                        </el-form-item>
                                        <el-form-item label="表单必填：" prop="required">
                                            <el-switch v-model="fieldForm.required"></el-switch>
                                        </el-form-item>
                                        <el-form-item label="表单禁用：" prop="disabled">
                                            <el-switch v-model="fieldForm.disabled"></el-switch>
                                        </el-form-item>
                                        <el-form-item prop="colMd">
                                            <template v-slot:label>
                                                <el-tooltip content="栅格化布局，1/2代表2个表单为1行以此类推，为空则继承父级" placement="top">
                                                    <i>表单栅格：</i>
                                                </el-tooltip>
                                            </template>
                                            <el-select v-model="fieldForm.colMd">
                                                <el-option value="" label="继承父级栅格"></el-option>
                                                <el-option :value="24" label="一行一个表单"></el-option>
                                                <el-option :value="12" label="一行两个表单"></el-option>
                                                <el-option :value="8" label="一行三个表单"></el-option>
                                                <el-option :value="6" label="一行四个表单"></el-option>
                                                <el-option :value="4" label="一行六个表单"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item prop="pattern" v-if="fieldForm.is == 'el-input'">
                                            <template v-slot:label>
                                                <el-tooltip content="数据正则验证" placement="top">
                                                    <i>表单验证：</i>
                                                </el-tooltip>
                                            </template>
                                            <el-input v-model="fieldForm.pattern"></el-input>
                                            <el-radio-group v-model="fieldForm.pattern">
                                                <el-radio label="/^1[3456789]\d{9}$/">手机</el-radio>
                                                <el-radio label="/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/">邮箱</el-radio>
                                                <el-radio label="/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/">身份证</el-radio>
                                                <el-radio label="/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/">网址</el-radio>
                                                <el-radio label="/^[\u0391-\uFFE5]+$/">纯中文</el-radio>
                                                <el-radio label="/^[a-zA-Z]+$/">纯英文</el-radio>
                                                <el-radio label="/^[0-9]*$/">纯字母</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </template>
                                    <div style="height: 1px;border: 1px dashed #999;width: 100%;margin-bottom: 22px;"></div>
                                    <el-form-item prop="tableSort">
                                        <template v-slot:label>
                                            <el-tooltip content="表格可根据此列排序" placement="top">
                                                <i>表格排序：</i>
                                            </el-tooltip>
                                        </template>
                                        <el-switch v-model="fieldForm.tableSort"></el-switch>
                                    </el-form-item>
                                    <el-form-item prop="tableShow">
                                        <template v-slot:label>
                                            <el-tooltip content="不显示则表格中不会出现此字段，演示只是做隐藏处理" placement="top">
                                                <i>表格显示：</i>
                                            </el-tooltip>
                                        </template>
                                        <el-switch v-model="fieldForm.tableShow"></el-switch>
                                    </el-form-item>
                                </template>
                            </template>
                        </el-form>
                    </div>
                </div>
                <div class="el-bottom">
                    <el-button size="medium" type="primary" icon="el-icon-refresh-right" @click="saveData()" :loading="drawerLoading">生成代码</el-button>
                    <el-button size="medium" @click="drawer = false">放弃设计</el-button>
                </div>
            </div>
        </div>
    </el-drawer>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                row: {},
                rows: [],
                table: [],
                oldProp: '',
                field: [
                    {title: '输入框', is: 'el-input', icon: 'icon-danhangshurukuang', field: 'varchar'},
                    {title: '编辑器', is: 'el-editor', icon: 'icon-fuwenbenbianjiqi_zhonghuaxian', field: 'text'},
                    {title: '单选框', is: 'el-radio-group', icon: 'icon-danxuankuang', field: 'tinyint'},
                    {title: '多选框', is: 'el-checkbox-group', icon: 'icon-duoxuan_xuanzhong', field: 'varchar'},
                    {title: '选择器', is: 'el-select', icon: 'icon-xuanzeqi', field: 'tinyint'},
                    {title: '文件上传', is: 'el-file-upload', icon: 'icon-a-wenjianjiawenjian', field: 'varchar'},
                    {title: '文件选择', is: 'el-file-select', icon: 'icon-a-wenjianjiawenjian', field: 'varchar'},
                    {title: '多文件选择', is: 'el-file-list-select', icon: 'icon-wenjian1', field: 'text'},
                    {title: '开关', is: 'el-switch', icon: 'icon-kaiguan', field: 'tinyint'},
                    {title: '日期时间选择器', is: 'el-date-picker', icon: 'icon-riqi', field: 'datetime'},
                    {title: '时间选择器', is: 'el-time-select', icon: 'icon-shijian1', field: 'varchar'},
                    {title: '计数器', is: 'el-input-number', icon: 'icon-shuzishurukuang', field: 'int'},
                    {title: '多级联动', is: 'el-cascader', icon: 'icon-cengji', field: 'varchar'},
                    {title: '滑块', is: 'el-slider', icon: 'icon-huakuai', field: 'tinyint'},
                    {title: '评分', is: 'el-rate', icon: 'icon-pingfen', field: 'int'},
                    {title: '颜色选择器', is: 'el-color-picker', icon: 'icon-yanse1', field: 'varchar'},
                    {title: '链接选择', is: 'el-link-select', icon: 'icon-lianjie', field: 'varchar'},
                    {title: '自定义参数', is: 'el-parameter', icon: 'icon-chanpincanshu', field: 'text'},
                    // 你可以自定义组件...
                ],
                drawerTable: false,
                drawer:false, 
                loading: false,
                synchroLoading: false,
                total: 0,
                search:{
                    keyword: '',
                    page:1,
                    pageSize: 10,
                },
                fieldForm: '',
                drawerLoading: false,
                drawerForm: {
                    cover: '',
                    title: '',
                    name: '',
                    field: [],
                    form_label_width: 100,
                    form_col_md: 24,
                    table_tree: 0,
                    table_export: 1,
                    table_sort: '',
                    search_keyword: 1,
                    search_date: 0,
                },
                drawerData: {
                    field: []
                },
                drawerRules: {
                    name: [
                        { required: true, message: '请输入数据表名', trigger: 'blur' },
                    ],
                    title: [
                        { required: true, message: '请输入菜单权限名称', trigger: 'blur' },
                    ],
                },
                indexUrl: 'curd/index',
                saveUrl: 'curd/save',
                updateUrl: 'curd/update',
                deleteUrl: 'curd/delete',
                deleteFieldUrl: 'curd/deleteField',
                saveFieldUrl: 'curd/saveField',
                updateFieldUrl: 'curd/updateField',
                addDraggable: {
                    animation: 300,
                    forceFallback: true,
                    sort: false,
                    group: {name: 'people', pull: 'clone', put: false},
                },
                draggable: {
                    handle: '.rank',
                    animation: 300,
                    forceFallback: true,
                    group:"people"
                },
            }
        },
        created () {
            this.getData();
        },
        methods: {
            
            /**
             * 搜索关键词改变时
             */
            keywordChange() {
                this.search = Object.assign({}, this.search, {page: 1});
                this.getData();
            },
            /**
             * 分页改变时
             */
            pageChange(val) {
                this.search = Object.assign({}, this.search, {page: val});
                this.getData();
            },
            /**
             * 打开字段
             */
            openField(item) {
                this.fieldForm = item;
            },
            /**
             * 移动字段
             */
            dropField(item) {
                item.prop = common.field(6);
                this.fieldForm  = JSON.parse(JSON.stringify(this.addField(item)));
                return this.fieldForm;
            },
            /**
             * 生成字段
             */
            addField(item) {
                if (typeof item.label == 'undefined') {
                    item.label = '未命名';
                }
                item.colMd      = '';
                if (item.is == 'el-checkbox-group' 
                || item.is == 'el-file-list-select' 
                || item.is == 'el-parameter'
                || item.is == 'el-field'
                || item.is == 'el-link-select') {
                    item.default = [];
                } else {
                    item.default = '';
                }
                item.placeholder= '';
                item.filterable = true;
                item.multiple   = true;
                item.type       = '';
                if (item.is == 'el-file-upload') {
                    item.type = '.png,.jpg,.jpeg';
                }
                if (item.is == 'el-file-select' || item.is == 'el-file-list-select') {
                    item.type = 'image';
                }
                if (item.is == 'el-date-picker') {
                    item.type = 'date';
                }
                if (item.is == 'el-time-select') {
                    item.type = 'time';
                }
                item.child      = [];
                item.tips       = '';
                item.required   = false;
                item.pattern    = '';
                item.disabled   = false;
                item.formShow   = true;
                item.tableBind  = [];
                item.tableSort  = true;
                item.tableShow  = true;
                this.saveField(item);
                return item;
            },
            /**
             * 新增字段
             */
            saveField(item) {
                let self = this;
                if (typeof self.drawerData.id != 'undefined') {
                    request.post(self.saveFieldUrl, {table: self.drawerData.name, prop: item.prop, field: item.field}, function(res){
                        if (res.status !== 'success') {
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        } else {
                            self.saveDataStatic();
                        }
                    });
                }
            },
            /**
             * 修改字段名称
             */
            updateField() {
                let self = this;
                if (typeof self.drawerData.id != 'undefined') {
                    request.post(self.updateFieldUrl, {table: self.drawerData.name, prop: self.fieldForm.prop, oldProp: self.oldProp, field: self.fieldForm.field, key: self.fieldForm.key}, function(res){
                        if (res.status !== 'success') {
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        } else {
                            self.saveDataStatic();
                        }
                    });
                }
            },
            /**
             * 修改字段类型
             */
            updateFieldType() {
                let self = this;
                if (typeof self.drawerData.id != 'undefined') {
                    request.post(self.updateFieldUrl, {table: self.drawerData.name, prop: self.fieldForm.prop, oldProp: '', field: self.fieldForm.field, key: self.fieldForm.key}, function(res){
                        if (res.status !== 'success') {
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        } else {
                            self.saveDataStatic();
                        }
                    });
                }
            },
            /**
             * 删除字段
             */
            moveField(item, index) {
                let self = this;
                self.fieldForm  = '';
                self.drawerData.field.splice(index, 1);
                if (typeof self.drawerData.id != 'undefined') {
                    request.post(self.deleteFieldUrl, {table: self.drawerData.name, prop: item.prop}, function(res){
                        if (res.status !== 'success') {
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                        } else {
                            self.saveDataStatic();
                        }
                    });
                }
            },
            /**
             * 取消关联
             */
            removeTable(item, index) {
                this.rows.splice(index, 1);
                this.$refs.table.toggleRowSelection(item, false);
            },
            /**
             * 获取数据
             */
            getData() {
                let self = this;    
                self.loading = true;
                request.post(self.indexUrl, self.search, function(res) {
                    self.loading = false;
                    if (res.status === 'success') {
                        res.data.forEach(function (item, index) {
                            item.check = true;
                        })
                        self.total           = res.count;
                        self.table           = res.data;
                        parent.parentVm.menu = res.publicMenu;
                    } else {
                        self.$notify({ showClose: true, message: res.message, type: res.status});
                    }
                });
            },
            /**
             * 打开数据
             */
            openData(row = '') {
                this.drawer     = true;
                this.type       = 'form';
                this.fieldForm  = '';
                if (row == '') { 
                    let PRI = this.addField({title: '主键', is: 'el-input', field: 'int', prop: 'id', label: '主键', key: 'PRI'});
                    this.drawerForm.field = [PRI];
                    this.drawerData = JSON.parse(JSON.stringify(this.drawerForm));
                } else {
                    this.drawerData = JSON.parse(JSON.stringify(row));
                }
            },
            /**
             * 静态保存数据
             */
            saveDataStatic() {
                let self = this;
                if (self.drawerData.name == '' || self.drawerData.title == '') {
                    self.drawerTable = true;
                    return false;
                }
                request.post(self.updateUrl, self.drawerData, function(res){
                    if (res.status != 'success') {
                        self.$notify({ showClose: true, message: res.message, type: res.status});
                    } else {
                        self.getData();
                    }
                });
            },
            /**
             * 保存数据
             */
            saveData() {
                let self = this;
                if (self.drawerData.name == '' || self.drawerData.title == '') {
                    self.drawerTable = true;
                    return false;
                }
                let url = typeof self.drawerData.id == 'undefined' ? self.saveUrl : self.updateUrl;
                self.drawerLoading = true;
                request.post(url, self.drawerData, function(res){
                    self.drawerLoading = false;
                    if (res.status === 'success') {
                        self.getData();
                        self.drawer = false;
                    }
                    self.$notify({ showClose: true, message: res.message, type: res.status});
                });
            },
            /**
             * 删除
             */
            removeData(row = "") {
                let self = this;
                let rows = row === "" ? self.rows : [row]; 
                self.$confirm('数据表会被删除，确定吗？', '', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
                    request.post(self.deleteUrl, {rows: rows}, function(res){
                        if (res.status === 'success') {
                            self.getData();
                            self.$emit('remove-data', res);
                        }
                        self.$notify({ showClose: true, message: res.message, type: res.status});
                    });
                }).catch(() => {});
            },
            /**
             * 更换表单类型
             */
            isChange() {
                if (this.fieldForm.is == 'el-checkbox-group' 
                || this.fieldForm.is == 'el-file-list-select' 
                || this.fieldForm.is == 'el-parameter'
                || this.fieldForm.is == 'el-field') {
                    this.fieldForm.default = [];
                } else {
                    this.fieldForm.default = '';
                }
                if (this.fieldForm.is == 'el-file-upload') {
                    this.fieldForm.type = '.png,.jpg,.jpeg';
                }
                if (this.fieldForm.is == 'el-file-select' || this.fieldForm.is == 'el-file-list-select') {
                    this.fieldForm.type = 'image';
                }
                if (this.fieldForm.is == 'el-date-picker') {
                    this.fieldForm.type = 'date';
                }
                if (this.fieldForm.is == 'el-time-select') {
                    this.fieldForm.type = 'time';
                }
                if (this.fieldForm.is == 'el-input') {
                    this.fieldForm.type = '';
                }
                switch (this.fieldForm.is) {
                    case 'el-input':
                    case 'el-checkbox-group':
                    case 'el-file-select':
                    case 'el-file-upload':
                    case 'el-time-select':
                    case 'el-cascader':
                    case 'el-color-picker':
                    case 'el-link-select':
                        this.fieldForm.field = 'varchar';
                        break;
                    case 'el-editor':
                    case 'el-file-list-select':
                    case 'el-parameter':
                        this.fieldForm.field = 'text';
                        break;
                    case 'el-radio-group':
                    case 'el-select':
                    case 'el-switch':
                    case 'el-slider':
                        this.fieldForm.field = 'tinyint';
                        break;    
                    case 'el-input-number':
                    case 'el-rate':
                        this.fieldForm.field = 'int';
                        break;       
                    case 'el-date-picker':
                        this.fieldForm.field = 'datetime';
                        break;       
                }
            },
            /**
             * 选中行
             */
            selectionChange(rows) {
                this.rows = rows;
            },
        },
    })
</script>
{include file="common/footer"}